<template>
    <div class="login">
        <div class="login_img">
            <img src="//img.dmallcdn.com//dshop/201912/13b7b397-1d7b-4fda-80df-1c4030410765" alt="">
        </div>
        <my-form
            ref="form"
            :mode="loginForm"
            :rule="loginRule"
        >
        <my-form-item>
            <div class="getcode">
                  <input-text
                v-model="loginForm.phone"
                placeholder="请输入手机号"
                type="phone"
            >
            </input-text>
            <myButton
                :disabled="disabled"
                type="primary"
                class="getcode-btn"
                round
                inline
                plain
                @click="getMsgCode"
            >
        <template v-if="time===0">获取验证码</template>
        <template v-else>{{ time }}秒后重新获取</template>
            </myButton>
            </div>
                </my-form-item>
          <my-form-item>
              <div class="setcode">
                   <input-text
                v-model="loginForm.code"
                placeholder="请输入验证码"
                type="number"
            >
            </input-text>
              </div>
          </my-form-item>
          <myButton
            type="primary"
            class="subbtn"
            round
            @click="submit"
          >
                登陆
          </myButton>
       </my-form>
    </div>
</template>

<script>
import myForm from '../../components/Form/Form'
import myFormItem from '../../components/Form/FormItem'
import axios from 'axios'
    export default {
        name:'Login',
        data() {
            return {
                loginForm: {
                    phone: "",
                    code: ""          
                },
                loginRule: {
                    phone: [
                        { required: true, message: "请输入手机号"},
                        { reg: /\d{11}/, message: "请输入正确格式的手机号"}
                    ],
                    code: [
                        { required: true, message: "请输入验证码"},
                        { min: 6, max: 6, message: "请输入6位验证码"}
                    ]
                },
                time: 0

            }
        },
        components: {
            myForm,
            myFormItem
        },
        computed: {
            disabled() {
                return this.loginForm.phone.length !== 11 || this.time !== 0;
            }
        },
        methods: {
           submit() {
                // this.$refs.form.validate().then(() => {
                //     this.$store.dispatch('user/login',{ phone: this.loginForm}).then(res => {
                //         console.log(res);
                //         this.$router.replace(this.$route.query.callbackUrl || '/home')
                //     })
                // })

            // let res = await this.$api.user.login({ ...this.loginForm });
            // console.log(res,'res')
            axios.post('/api/login',{ phone: this.loginForm.phone}).then(res => {
                if(res.code === 0) {
                    this.$router.replace(this.$route.query.callbackUrl || '/home')
                }
            })
            },
            getMsgCode() {
                this.time = 10;
                const interval = setInterval(() => {
                    this.time -= 1;
                    if(this.time === 0) {
                        clearInterval(interval)
                    }
                },1000);
                this.$api.user.msgCode({
                    phone: this.loginForm.phone
                }).then(res => {
                    console.log(res.data)
                })
            }
        },
    }
</script>

<style lang="scss" scoped>
   * {
  padding: 0;
  margin: 0;
  list-style: none;
}
img {
  width: 100%;
}
.login {
  .banner {
    display: inline;
    width: 100%;
  }
  .subbtn {
    width: calc(100%-40px);
    display: block;
    // margin: 0 20px;
  }
  .getcode {
       width: 100%;
      height: 100%;
         display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
    .getcode-btn {
      line-height: 1;
      font-size: 24px;
      flex-shrink: 0;
      margin-right: 20px;
    }
  }
  .setcode {
     width: 100%;
    height: 100%;
       display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
  }
}
</style>